<template>
  <div class="search-div">
    <!-- 搜索表單 -->
    <el-form label-width="70px" size="small" v-model="userRoleDto">
      <el-form-item label="用户名">
        <el-input
          v-model="userRoleDto.username"
          placeholder="用户名"
        ></el-input>
      </el-form-item>

      <el-row style="display:flex">
        <el-button type="primary" size="small" @click="findAllPages">
          搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
    </el-form>
    <div class="tools-div">
      <el-button type="success" size="small" @click="addfilst">添 加</el-button>
    </div>
    <!-- 查詢列表 -->
    <el-table
      ref="singleTableRef"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column prop="userId" label="序号" width="180" />
      <el-table-column prop="username" label="用户名" width="180" />
      <el-table-column prop="phone" label="手机号" width="180" />
      <el-table-column prop="name" label="所属部门" width="180" />
      <el-table-column prop="roleName" label="角色" width="180" />
      <el-table-column prop="status" label="状态" width="180">
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="updatefilst(scope.row)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="delfilrst(scope.row.userId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页条-->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 4, 6, 8]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next"
      :total="total"
    />
  </div>
  <!-- 添加弹框 -->
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      style="max-width: 600px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <!--      <el-form-item label="用户Id" prop="pass">-->
      <!--        <el-input v-model="ruleForm.userId" />-->
      <!--      </el-form-item>-->
      <el-form-item label="用户名" prop="checkPass">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item label="密码" prop="checkPass">
        <el-input v-model="ruleForm.password" type="password" />
      </el-form-item>
      <el-form-item label="所属部门" prop="checkPass">
        <el-select
          v-model="ruleForm.deptId"
          placeholder="请输入"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.deptId"
            :label="item.name"
            :value="item.deptId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="checkPass">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="角色" prop="roleName">
        <el-select
          v-model="ruleForm.roleId"
          placeholder="请输入"
          style="width: 240px"
        >
          <el-option
            v-for="item in optionsrole"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="checkPass">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="ruleForm.status">
            <el-radio value="1" size="large">正常</el-radio>
            <el-radio value="2" size="large">禁用</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">
          添加
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 修改弹框 -->
  <el-dialog
    v-model="dialogVisible2"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <el-form
      style="max-width: 600px"
      :model="ruleForm2"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="用户Id" prop="pass">
        <el-input v-model="ruleForm2.userId" disabled />
      </el-form-item>
      <el-form-item label="用户名" prop="checkPass">
        <el-input v-model="ruleForm2.username" />
      </el-form-item>
      <el-form-item label="所属部门" prop="checkPass">
        <el-select
          v-model="ruleForm2.deptId"
          placeholder="请输入"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.deptId"
            :label="item.name"
            :value="item.deptId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="checkPass">
        <el-input v-model="ruleForm2.phone" />
      </el-form-item>
      <el-form-item label="角色" prop="checkPass">
        <!--        <el-input v-model="ruleForm2.roleName" />-->
        <el-select
          v-model="ruleForm2.roleId"
          placeholder="请输入"
          style="width: 240px"
        >
          <el-option
            v-for="item in optionsrole"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="checkPass">
        <div class="mb-2 ml-4">
          <el-radio-group v-model="ruleForm2.status">
            <el-radio value="1" size="large">正常</el-radio>
            <el-radio value="2" size="large">禁用</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateForm()">
          修改
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getUserlist } from '@/api/user/user'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import { saveUser, removeUser, updateUser } from '@/api/user/user'

const tableData = ref([])
const total = ref(10)
const pageNum = ref(1)
const pageSize = ref(2)
const userRoleDto = ref({
  pageNum: pageNum.value,
  pageSize: pageSize.value,
  username: '',
})
//修改
const ruleForm2 = ref({
  userId: '',
  username: '',
})
const dialogVisible = ref(false)
// 查所有方法
function findAllPages() {
  // 携带搜索条件请求获取用户列表
  request({
    url: '/service-user/user/getUser',
    method: 'get',
    params: userRoleDto.value,
  }).then(res => {
    console.log(res)
    tableData.value = res.data
    // total.value=res.data.total
  })
}
findAllPages()
const handleSizeChange = val => {
  userRoleDto.value.pageSize = val
  findAllPages()
}
const handleCurrentChange = val => {
  userRoleDto.value.pageNum = val
  findAllPages()
}
// // 添加
const ruleForm = ref({
  userId: '',
  username: '',
  password: '',
  phone: '',
  roleName: '',
  status: '',
  name: '',
})
const addfilst = () => {
  ruleForm.value = {}
  dialogVisible.value = true
}
//添加
// const radio1 = ref('1')
const submitForm = () => {
  saveUser(ruleForm.value).then(res => {
    console.log(res)
    if (res.code == 200) {
      console.log(res.data)
      dialogVisible.value = false
      ElMessage.success('添加成功')
      findAllPages()
    } else {
      dialogVisible.value = false
      ElMessage.error('添加失败')
    }
  })
}

// // 删除
const delfilrst = userId => {
  console.log(userId)
  removeUser(userId).then(res => {
    if (res.code == 200) {
      console.log(res)
      ElMessage.success('删除成功')
      findAllPages()
    }
  })
}
//修改
const dialogVisible2 = ref(false)

const updateForm = () => {
  console.log(ruleForm2.value)
  updateUser(ruleForm2.value).then(res => {
    if (res.code == 200) {
      console.log(res)
      findAllPages()

      dialogVisible2.value = false
      alert('修改成功')
      // ElMessage.success("修改成功")
    }
  })
}

function updatefilst(row) {
  dialogVisible2.value = true
  ruleForm2.value.userId = row.userId
  ruleForm2.value.username = row.username
  ruleForm2.value.name = row.name
  ruleForm2.value.phone = row.phone
  ruleForm2.value.roleName = row.roleName
  ruleForm2.value.status = row.status
}
//部门
const options = ref([])
function DeptList() {
  request({
    url: '/service-product/tDept/list',
    method: 'get',
  }).then(res => {
    options.value = res.data
  })
}
DeptList()
//角色
const optionsrole = ref([])
function roleList() {
  request({
    url: '/service-user/role/getrolelist',
    method: 'get',
  }).then(res => {
    console.log(res)
    optionsrole.value = res.data.data
  })
}
roleList()
</script>
